import React from 'react';
import { lazy } from 'react'
import Home from "../views/Home"
// import About from "../views/About"
// import User from "../views/User"
import Login from "../views/Login"
const Page301 = lazy(() => import("../views/Page301"))
const User = lazy(() => import("../views/User"))
const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))

// Navigate 重定向组件
import { Navigate } from "react-router-dom"

const withLoadingComponent = (comp: JSX.Element) => {
    return <React.Suspense fallback={<div>Loading...</div>}>
        {comp}
    </React.Suspense>
}

const routes = [
    {
        path: "/", //重定向到home
        element: <Navigate to="/page1" />
    },
    {
        path: "/",
        element: <Home />,
        children: [
            {
                path: "/page1",
                element: withLoadingComponent(<Page1 />)
            },
            {
                path: "/page2",
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: "/page3/page301",
                element: withLoadingComponent(<Page301 />)
            }

        ]
    },
    //嵌套路由结束-------------------------
    {
        path: "/login",
        element: <Login />
    },
    //没配置的路径，统一跳转配置
    {
        path: "*",
        element: <Navigate to="/page1" />
    },
    // {
    //     path: "/home",
    //     element: <Home />,
    // },

    {
        path: "/user",
        element: withLoadingComponent(<User />),
    }
    // { path: "*", element: <Navigate to="/" /> },
]
export default routes